<template>
  <div>
    <div style="margin:30px 30px 30px 100px;">
      <span style="margin-left:40px;font-size:20px">起止日期：</span>
      <el-date-picker
        v-model="time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <span style="margin-left:40px;font-size:20px">流水号：</span>
      <el-input v-model="condition.serialId" placeholder="请输入内容" style="width:20%;"></el-input>
      <el-button type="primary" style="margin-left:40px;" @click="search(1)">搜索</el-button>
      <el-button type="primary" plain style="margin-left:30px;" @click="search(0)">重置</el-button>
    </div>
    <el-table
      :data="serial"
      type="selection"
      style="width: 100%">
      <el-table-column
        prop="gmtPayment"
        label="付款时间"
        align="center" 
        sortable
        coulumn-key='gmtPayment'
        >
      </el-table-column>
      <el-table-column
        prop="serialId"
        label="流水号"
        column-key="trandId"
        align='center'
      >
      </el-table-column>
      <el-table-column
        prop="outTradeNo"
        label="订单编号"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="receiptAmount"
        label="实付金额"
        align="center">
        <template slot-scope="scope">
            {{scope.row.receiptAmount | money}}
        </template>
      </el-table-column>
      <el-table-column
        prop="sellerId"
        label="卖家ID"
        align="center">
      </el-table-column>
      <el-table-column
        prop="buyerId"
        label="买家ID"
        align="center">
      </el-table-column>
      <el-table-column
        prop="payType"
        label="支付类型"
        align="center"
        :filters="[{ text: '微信', value: '1' }, { text: '支付宝', value: '0' }]"
        :filter-method="fileterPayType"
        >
        <template slot-scope="scope">
          {{scope.row.payType == 1? '微信':'支付宝'}}
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    <span style="font-size:20px;margin-left:30px">所有订单总金额：</span>
    <span style="font-size:20px;">{{money.totalMoney}} 元</span>
    <span style="font-size:20px;margin-left:30px">微信支付总金额：</span>
    <span style="font-size:20px;">{{money.vxMoney}} 元</span>
    <span style="font-size:20px;margin-left:30px">支付宝支付总金额：</span>
    <span style="font-size:20px;">{{money.zfbMoney}} 元</span>
    <el-divider></el-divider>
    <div :class="[active == 1?'block':'find']">
      <el-pagination
      background
      :page-size='condition.limit'
      layout="prev, pager, next"
      @current-change="init"
      :total="total" >
      </el-pagination>
    </div>
    <div :class="[active == 0?'block':'find']">
      <el-pagination
      background
      :page-size='condition.limit'
      layout="prev, pager, next"
      @current-change="search"
      :total="total" >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import http from '@/core/httpRequest.js'

export default {
  data() {
    return {
      serial:[{
        serialId: '',
        outTradeNo: '',
        receiptAmount: '',
        sellerId: '',
        buyerId: '',
        gmtPayment: '',
        payType: ''
      }],
      total: 1,
      timeResult:'',
      date: '',
      condition:{
        serialId: '',
        beginGmtPayment: '',
        endGmtPayment: '',
        page: '1',
        limit: 5
      },
      time: '',
      money:{
        totalMoney: '',
        vxMoney: '',
        zfbMoney: ''
      },
      active: ''


    }
  },
  mounted(){
    this.init(1)
  },
  methods:{
    init(page){
      http.get(`/serial/${page}`).then(res => {
        this.serial = res.data.data.data
        this.total = res.data.data.total
        this.money = res.data.data.moneyType
      })
      this.active = 1
    },
    fileterPayType(value, row){
      return row.payType == value;
    },
    search(page){
      if(!page){
        this.init(1)
      }else{
        if(this.time == null){
          this.time= ['','']
        }
        this.condition.beginGmtPayment = this.time[0]
        this.condition.endGmtPayment = this.time[1]
        this.condition.page = page
        http.post(`/serial/search`,this.condition).then(res => {
          this.serial = res.data.data.data
          this.total = res.data.data.total
          this.money = res.data.data.moneyType
        })
        this.active = 0
      }
    },
    
  }

}
</script>

<style>
  .block{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
      
    }
  .find{
      display: none;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
  }
</style>